<template>
  <div class="screen-display">
    <div class="screen-header">
      <div class="screen-title">数据大屏显示系统</div>
      <div class="screen-status">
        <el-tag :type="screenStore.isConnected ? 'success' : 'danger'">
          {{ screenStore.isConnected ? '已连接' : '未连接' }}
        </el-tag>
        <span class="current-page">当前页面: {{ screenStore.config.currentPage }}</span>
        <span class="mode-info">模式: {{ screenStore.config.mode === 'auto' ? '自动' : '手动' }}</span>
      </div>
    </div>
    
    <div class="screen-content">
      <!-- 首页 -->
      <div v-if="screenStore.config.currentPage === '首页'" class="page-content home-page">
        <div class="welcome-section">
          <h1>欢迎使用数据大屏系统</h1>
          <p>实时监控 · 数据分析 · 智能展示</p>
        </div>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-number">1,234</div>
            <div class="stat-label">今日访问</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">567</div>
            <div class="stat-label">活跃用户</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">89%</div>
            <div class="stat-label">系统负载</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">24/7</div>
            <div class="stat-label">运行状态</div>
          </div>
        </div>
      </div>
      
      <!-- 数据概览 -->
      <div v-else-if="screenStore.config.currentPage === '数据概览'" class="page-content data-overview">
        <h2>数据概览</h2>
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-title">销售趋势图</div>
            <div class="chart-content">
              <div class="bar" style="height: 60%"></div>
              <div class="bar" style="height: 80%"></div>
              <div class="bar" style="height: 45%"></div>
              <div class="bar" style="height: 90%"></div>
              <div class="bar" style="height: 70%"></div>
              <div class="bar" style="height: 85%"></div>
            </div>
          </div>
          <div class="chart-placeholder">
            <div class="chart-title">用户分布图</div>
            <div class="chart-content pie-chart">
              <div class="pie-segment" style="--angle: 120deg; --color: #409eff;"></div>
              <div class="pie-segment" style="--angle: 90deg; --color: #67c23a;"></div>
              <div class="pie-segment" style="--angle: 150deg; --color: #e6a23c;"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 实时监控 -->
      <div v-else-if="screenStore.config.currentPage === '实时监控'" class="page-content real-time-monitor">
        <h2>实时监控</h2>
        <div class="monitor-grid">
          <div class="monitor-card">
            <div class="monitor-header">CPU使用率</div>
            <div class="monitor-value">78%</div>
            <div class="monitor-chart">
              <div class="progress-bar" style="width: 78%"></div>
            </div>
          </div>
          <div class="monitor-card">
            <div class="monitor-header">内存使用率</div>
            <div class="monitor-value">65%</div>
            <div class="monitor-chart">
              <div class="progress-bar" style="width: 65%"></div>
            </div>
          </div>
          <div class="monitor-card">
            <div class="monitor-header">网络流量</div>
            <div class="monitor-value">2.3GB/s</div>
            <div class="monitor-chart">
              <div class="progress-bar" style="width: 45%"></div>
            </div>
          </div>
          <div class="monitor-card">
            <div class="monitor-header">磁盘使用率</div>
            <div class="monitor-value">42%</div>
            <div class="monitor-chart">
              <div class="progress-bar" style="width: 42%"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 统计分析 -->
      <div v-else-if="screenStore.config.currentPage === '统计分析'" class="page-content statistics">
        <h2>统计分析</h2>
        <div class="stats-container">
          <div class="stats-table">
            <table>
              <thead>
                <tr>
                  <th>指标</th>
                  <th>今日</th>
                  <th>本周</th>
                  <th>本月</th>
                  <th>趋势</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>访问量</td>
                  <td>1,234</td>
                  <td>8,567</td>
                  <td>32,456</td>
                  <td><span class="trend-up">↗ +12%</span></td>
                </tr>
                <tr>
                  <td>用户数</td>
                  <td>567</td>
                  <td>3,234</td>
                  <td>12,345</td>
                  <td><span class="trend-up">↗ +8%</span></td>
                </tr>
                <tr>
                  <td>转化率</td>
                  <td>15.6%</td>
                  <td>14.2%</td>
                  <td>13.8%</td>
                  <td><span class="trend-down">↘ -2%</span></td>
                </tr>
                <tr>
                  <td>收入</td>
                  <td>¥12,345</td>
                  <td>¥89,234</td>
                  <td>¥345,678</td>
                  <td><span class="trend-up">↗ +25%</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- 系统设置 -->
      <div v-else-if="screenStore.config.currentPage === '系统设置'" class="page-content system-settings">
        <h2>系统设置</h2>
        <div class="settings-grid">
          <div class="setting-card">
            <div class="setting-title">显示设置</div>
            <div class="setting-content">
              <p>分辨率: 1920x1080</p>
              <p>刷新率: 60Hz</p>
              <p>亮度: 80%</p>
            </div>
          </div>
          <div class="setting-card">
            <div class="setting-title">网络设置</div>
            <div class="setting-content">
              <p>IP地址: 192.168.1.100</p>
              <p>端口: 8080</p>
              <p>状态: 在线</p>
            </div>
          </div>
          <div class="setting-card">
            <div class="setting-title">安全设置</div>
            <div class="setting-content">
              <p>防火墙: 启用</p>
              <p>加密: SSL/TLS</p>
              <p>认证: 已启用</p>
            </div>
          </div>
          <div class="setting-card">
            <div class="setting-title">维护信息</div>
            <div class="setting-content">
              <p>版本: v1.0.0</p>
              <p>更新时间: 2024-01-15</p>
              <p>状态: 正常</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 默认页面 -->
      <div v-else class="page-content default-page">
        <h2>{{ screenStore.config.currentPage }}</h2>
        <p>页面内容正在加载中...</p>
      </div>
    </div>
    
    <!-- 自动切换倒计时 -->
    <div v-if="screenStore.config.mode === 'auto'" class="auto-switch-timer">
      <div class="timer-label">自动切换倒计时</div>
      <div class="timer-value">{{ countdown }}s</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useScreenStore } from '../stores/screenStore'
import WebSocketService from '../utils/websocket'

export default {
  name: 'ScreenDisplay',
  setup() {
    const screenStore = useScreenStore()
    const countdown = ref(screenStore.config.interval)
    let timer = null
    
    // 自动切换逻辑
    const startAutoSwitch = () => {
      if (screenStore.config.mode === 'auto') {
        timer = setInterval(() => {
          countdown.value--
          if (countdown.value <= 0) {
            // 切换到下一个页面
            const currentIndex = screenStore.config.pages.indexOf(screenStore.config.currentPage)
            const nextIndex = (currentIndex + 1) % screenStore.config.pages.length
            const nextPage = screenStore.config.pages[nextIndex]
            screenStore.switchPage(nextPage)
            countdown.value = screenStore.config.interval
          }
        }, 1000)
      }
    }
    
    const stopAutoSwitch = () => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    }
    
    // 监听模式变化
    watch(() => screenStore.config.mode, (newMode) => {
      if (newMode === 'auto') {
        countdown.value = screenStore.config.interval
        startAutoSwitch()
      } else {
        stopAutoSwitch()
        countdown.value = screenStore.config.interval
      }
    })
    
    // 监听间隔时间变化
    watch(() => screenStore.config.interval, (newInterval) => {
      if (screenStore.config.mode === 'auto') {
        countdown.value = newInterval
      }
    })
    
    // 监听页面切换
    watch(() => screenStore.config.currentPage, () => {
      if (screenStore.config.mode === 'auto') {
        countdown.value = screenStore.config.interval
      }
    })
    
    onMounted(async () => {
      // 连接WebSocket
      try {
        await WebSocketService.connect()
        screenStore.isConnected = true
        
        // 订阅配置更新
        WebSocketService.subscribe('/topic/screen-config', (message) => {
          if (message.type === 'config') {
            Object.assign(screenStore.config, message.data)
          }
        })
        
        // 订阅页面切换
        WebSocketService.subscribe('/topic/screen-switch', (message) => {
          if (message.type === 'switch') {
            screenStore.config.currentPage = message.data
          }
        })
        
        // 获取初始配置
        await screenStore.fetchConfig()
        
        // 启动自动切换
        if (screenStore.config.mode === 'auto') {
          startAutoSwitch()
        }
      } catch (error) {
        console.error('WebSocket连接失败:', error)
        screenStore.isConnected = false
      }
    })
    
    onUnmounted(() => {
      stopAutoSwitch()
      WebSocketService.disconnect()
    })
    
    return {
      screenStore,
      countdown
    }
  }
}
</script>

<style scoped>
.screen-display {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  overflow: hidden;
}

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.screen-title {
  font-size: 28px;
  font-weight: bold;
}

.screen-status {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
}

.screen-content {
  height: calc(100vh - 100px);
  padding: 40px;
  overflow-y: auto;
}

.page-content {
  height: 100%;
}

/* 首页样式 */
.home-page {
  text-align: center;
}

.welcome-section {
  margin-bottom: 60px;
}

.welcome-section h1 {
  font-size: 48px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-section p {
  font-size: 24px;
  opacity: 0.9;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 18px;
  opacity: 0.8;
}

/* 数据概览样式 */
.data-overview h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  height: calc(100% - 100px);
}

.chart-placeholder {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-title {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
}

.chart-content {
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 200px;
}

.bar {
  width: 40px;
  background: linear-gradient(to top, #409eff, #67c23a);
  border-radius: 5px 5px 0 0;
  transition: height 0.3s ease;
}

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--color) 0deg var(--angle), transparent var(--angle));
}

/* 实时监控样式 */
.real-time-monitor h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.monitor-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.monitor-header {
  font-size: 20px;
  margin-bottom: 15px;
}

.monitor-value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.monitor-chart {
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

/* 统计分析样式 */
.statistics h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
}

.stats-container {
  height: calc(100% - 100px);
}

.stats-table {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-table table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table th,
.stats-table td {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-table th {
  font-size: 18px;
  font-weight: bold;
}

.stats-table td {
  font-size: 16px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

/* 系统设置样式 */
.system-settings h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.setting-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.setting-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.setting-content p {
  margin: 10px 0;
  font-size: 16px;
}

/* 自动切换倒计时 */
.auto-switch-timer {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 15px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.timer-label {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 5px;
}

.timer-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

/* 默认页面样式 */
.default-page {
  text-align: center;
  padding-top: 100px;
}

.default-page h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.default-page p {
  font-size: 18px;
  opacity: 0.8;
}
</style> 